<%@page contentType="text/html;charset=UTF-8" language="java"
	isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv=
"Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/css/templatemo_style.css" />
<!-- 页面整体布局样式定义 -->
<link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css" />
<!-- 菜单样式定义 -->
<link rel="stylesheet" href="${ctx}/css/nivo-slider.css" media="screen" />
<!-- 焦点图样式定义 -->
<script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript"
	src="${ctx}/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
function showUserName(){
	var name = "${user.username}";
	if(name != ""){
		//将登录位置显示用户名
		$("#login").html(name);
		//将注销由隐藏到显示
		$("#exitP").show();
		$("#login").attr("href","${ctx}/UserServlet?flag=info&userId=${user.userId}");
	}else{
		$("#exitP").hidden();
	}
}
</script>
<!-- 焦点图JS脚本定义 -->
</head>
<body>
	<div id="templatemo_body_wrapper">
		<div id="templatemo_wrapper">
			<!-- header -->
			<div id="templatemo_header">
				<div id="site_title">
					<h1>
						<a href="#">穿美在线鞋城</a>
					</h1>
				</div>
				<div id="header_right">
					<p>
						<a href="${ctx}/UserServlet?flag=login" id="login" target="_blank">登陆</a>&nbsp;
						<span id="exitP" style="display: none"><a href="${ctx}/UserServlet?flag=logout" id="exit"
							target="_blank">注销</a></span>
					</p>
				</div>
				<div class="cleaner"></div>
			</div>
			<!-- END of templatemo_header -->

			<!-- menu -->
			<div id="templatemo_menubar">
				<div id="top_nav" class="ddsmoothmenu">
					<ul>
						<li><a href="${ctx}/pro?flag=index" >首页</a></li>
							<li><a href="${ctx}/pro?flag=product" >产品</a></li>
							<li><a href="${ctx}/ShoppingCartServlet" class="selected" id="cart">我的购物车</a></li>
							<li><a href="${ctx}/OrderServlet?flag=qoi">我的订单</a></li>
					</ul>
					<br style="clear: left" />
				</div>
				<!-- end of ddsmoothmenu -->
			</div>
			<!-- END of templatemo_menubar -->
			<!-- main -->
			<div id="templatemo_main">
				<!-- 侧边栏 -->
				<div id="sidebar" class="float_l">
					<!-- sidebar 1 -->
					<div class="sidebar_box">
						<span class="bottom"></span>
						<h3>品牌</h3>
						<c:forEach items="${brand}" var="bra">
							<div class="content">
								<ul class="sidebar_list">
									<li><a href="pro?flag=brand&&category_id=${bra.category_id}"><c:out value="${bra.name}"/></a></li>
								</ul>
							</div>
						</c:forEach>
					</div>
					<!-- sidebar 2 -->
					<div class="sidebar_box">
						<span class="bottom"></span>
						<h3>热卖单品</h3>
						<c:forEach items="${hot}" var="hot">
							<div class="content">
								<div class="bs_box">
									<a
										href="${ctx}/pro?flag=detailed&&product_id=${hot.product_id}"><img
										src="${ctx}/${hot.imgpath}" alt="image"
										style="width: 96px; height: 96px" /></a>
									<h4>
										<br /> <a
											href="${ctx}/pro?flag=detailed&&product_id=${hot.product_id}">${hot.feature}</a>
									</h4>
									<br />
									<p class="price">${hot.price}.00￥</p>
									<div class="cleaner"></div>
								</div>
							</div>
						</c:forEach>
					</div>
				</div>
				<!-- END of sidebar -->

				<!-- 内容展示区 -->
				<div id="content" class="float_r">
					<h1>结算</h1>
					<div>
						<h5>收货人信息</h5>
						<form id="formId" method="post">
							<div style="float:left;">
								收货人姓名:<span id="xingming"></span><br>
								<input type="text" id="name" name="receiver" 
								style="width:290px">
								<br/><br/>
							</div>
							<div style="float:right;">
								地址：<span id="dizhi"></span><br>
								<input type="text" id="address" name="address"
								 style="width:290px">
								<br/><br/>
							</div>
							<div style="float:left;">
								省份：<span id="shengfen"></span><br>
								<input type="text" id="province" name="province" 
								style="width:290px">
								<br/><br/>
							</div>
							<div style="float:right;">
								邮编：<span id="youbian"></span><br >
								<input type="text" id="zipcode" name="zipcode" style="width:290px">
								<br/><br/>
							</div>
							<div style="float:left;">
								城市：<span id="chengshi"></span><br>
								<input type="text" id="city" name="city" style="width:290px">
								<br/><br/>
							</div>
							<div style="float:right;">
								电话：请提供真实有效的电话:<span id="dianhua"></span><br>
								<input type="text" id="phone" name="telphone" style="width:290px">
								<br/><br/>
							</div>
							
							<div style="float:left;">
								区县：<span id="quxian"></span><br>
								<input type="text" id="county" name="county" style="width:290px">
								<br/><br/>
							</div>
						</form>
					</div>								
				</div>
				<div class="cleaner"></div>
				<div style="margin-left:252px;margin-top:-465px;
						padding-bottom:300px; color:black ;">
					<h3>购物车</h3>
					<span style="background-color: #f0f0f0; color: red;
						width: 100px; heigh: 30px;">
					总金额 :￥  <c:out value="${total}"></c:out>
					</span>	<br><br> 
					<input type="checkbox" id="check"/>我接受本网站的使用条款。
					<span id="danxuan"></span><br><br><br><br>
					<div style="border:1px solid #999;background-color:#fff;
						box-sizing:border-box;">
					<table >						
						<tr>
							<td>
								<img alt="image" src="images/alipay.jpg">&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;					
							</td>
							<td>推荐使用支付宝付款，使用红包支付，更多实惠&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							</td>
							<td><p id="zfb">支付宝支付</p></td>
						</tr>
						<tr>
							<td><img alt="image" src="images/wechat.jpg"></td>
							<td>没有支付宝账户，不用担心，我们也支持微信支付</td>
							<td><p id="wx">微信支付</p></td>
						</tr>
					</table>
					</div>
					<br><br><br>
					<a href="${ctx}/ShoppingCartServlet">暂不结算，返回购物车</a>
				</div>
			</div>
			<!-- END of templatemo_main -->
			<!-- footer -->
			<div id="templatemo_footer">
				<p>
					<a href="${ctx}/pro?flag=index">首页</a> | <a
						href="${ctx}/pro?flag=product">产品</a> | <a
						href="${ctx}/ShoppingCartServlet">我的购物车</a> | <a
						href="${ctx}/OrderServlet?flag=qoi">我的订单</a>
				</p>
				版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
			</div>
			<!-- END of templatemo_footer -->

		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			showUserName();
			//支付宝
			$("#zfb").click(function(){
				if($("#check").attr('checked')){
					$("#formId").attr("action",
							"${ctx}/ShoppingCartServlet?flag=order&payment=2");
					$("#formId").submit();
				}else{
					$("#danxuan").text("请选中");
					$("#danxuan").css("color","red");
				}
			});
			//微信
			$("#wx").click(function(){
				if($("#check").attr('checked')){
					$("#formId").attr("action",
						"${ctx}/ShoppingCartServlet?flag=order&payment=1");
					$("#formId").submit();
				}else{
					$("#danxuan").text("请选中");
					$("#danxuan").css("color","red");
				}
			});
			//收货人姓名失去焦点
			$("#name").blur(function(){
				var name = $("#name").val();
				var reg = new RegExp("^[\u4e00-\u9fa5,a-z,A-Z,0-9]{1,5}$");
				if(reg.test(name)){
					$("#xingming").text("√");
				}else{
					$("#xingming").text("请输入1-5位长度字符的姓名");
					$("#xingming").css("color","red");
				}
			});
			//地址失去焦点验证
			$("#address").blur(function(){
				var address = $("#address").val();
				var reg = new RegExp("^[\u4e00-\u9fa5,a-z,A-Z,0-9]{5,50}$");
				if(reg.test(address)){
					$("#dizhi").text("√");				
				}else{
					$("#dizhi").text("请输入5-50位字符之间的地址");
					$("#dizhi").css("color","red");
				}
			});
			//省份验证
			$("#province").blur(function(){
				var province = $("#province").val();
				var reg = new RegExp("^[\u4e00-\u9fa5,a-z,A-Z,0-9]{2,10}$");
				if(reg.test(province)){
					$("#shengfen").text("√");				
				}else{
					$("#shengfen").text("请输入2-10位字符之间的省份");
					$("#shengfen").css("color","red");
				}
			});
			//邮编验证
			$("#zipcode").blur(function(){
				var zipcode = $("#zipcode").val();
				var reg = new RegExp("^[0-9]{6}$");
				if(reg.test(zipcode)){
					$("#youbian").text("√");				
				}else{
					$("#youbian").text("请输入6位字符的邮编");
					$("#youbian").css("color","red");
				}
			});
			//城市验证
			$("#city").blur(function(){
				var city = $("#city").val();
				var reg = new RegExp("^[\u4e00-\u9fa5,a-z,A-Z,0-9]{1,10}$");
				if(reg.test(city)){
					$("#chengshi").text("√");				
				}else{
					$("#chengshi").text("请输入1-10位字符之间的城市");
					$("#chengshi").css("color","red");
				}
			});
			//电话验证
			$("#phone").blur(function(){
				var phone = $("#phone").val();
				var reg = new RegExp("^1[3-9][0-9]{9}$");
				if(reg.test(phone)){
					$("#dianhua").text("√");				
				}else{
					$("#dianhua").text("请输入11位的手机号码");
					$("#dianhua").css("color","red");
				}
			});
			//区县验证
			$("#county").blur(function(){
				var county = $("#county").val();
				var reg = new RegExp("^[\u4e00-\u9fa5,a-z,A-Z,0-9]{1,10}$");
				if(reg.test(county)){
					$("#quxian").text("√");				
				}else{
					$("#quxian").text("请输入1-10位字符之间的区县");
					$("#quxian").css("color","red");
				}
			});
	});
</script>
</body>
</html>